<template>
  <div class="wrapper">
    <!--编辑按钮-->
    <div class="modify_btn" @click="nav2edit">
      编辑
    </div>
    <!--日程主题title-->
    <div class="field">
      <div class="field_title">
        <img :src="record_icon" class="title_img"/>
        <div class="title_text" style="margin-left: 0;">日程主题</div>
      </div>
      <div class="field_input" style="padding-left: 7px;font-size: 14px;">
<!--        <input v-model="scheduleObject.title" disabled>-->
        <div style="word-break: break-all">{{scheduleObject.title}}</div>
      </div>
    </div>
    <!--拜访对象title-->
    <div class="field">
      <div class="field_title">
        <img :src="people_icon" class="title_img"/>
        <div class="title_text" style="margin-left: 0;">拜访对象</div>
      </div>
      <div class="field_input" style="position: relative">
        <Cell :title="scheduleObject.contact"/>
        <div v-if="etmscode" @click="nav2Send"
             style="position: absolute;width: 80px;height: 30px;bottom:5px;right:0;border-radius:3px;color:#fff;display: flex;align-items: center;justify-content:center;font-size: 15px;font-family: PingFangSC-Regular;background: #454592;">
          一键转发
        </div>
      </div>
    </div>
    <!--日程类型title-->
    <div class="field">
      <div class="field_title">
        <img :src="flag_icon" class="title_img"/>
        <div class="title_text" style="margin-left: 0;">日程类型</div>
      </div>
      <div class="field_input">
        <Cell :title="scheduleObject.callType+'-'+scheduleObject.callSubType"/>
      </div>
    </div>
    <!--日程地址title-->
    <div class="field">
      <div class="field_title">
        <img :src="location_icon" class="title_img"/>
        <div class="title_text" style="margin-left: 0;">日程地址</div>
      </div>
      <div class="field_input" style="padding-left: 7px;font-size: 14px;">
<!--        <input v-model="scheduleObject.callAddress" disabled>-->
        <div style="word-break: break-all">{{scheduleObject.callAddress}}</div>
      </div>
    </div>
    <!--日程时间title-->
    <div class="field">
      <div class="field_title">
        <img :src="time_icon" class="title_img"/>
        <div class="title_text" style="margin-left: 0;">日程时间</div>
      </div>
      <div class="field_input">
        <Cell :title="currentDateStr"/>
      </div>
    </div>
    <!--使用材料title-->
    <div class="field">
      <div class="field_title">
        <img :src="copy_icon" class="title_img"/>
        <div class="title_text" style="margin-left: 0;">使用材料</div>
      </div>
      <div class="field_input">
        <div style="word-break: break-all">{{materialStr}}</div>
<!--        <Cell :title="materialStr"/>-->
      </div>
    </div>
    <!--备注title-->
    <div class="field">
      <div class="field_title">
        <img :src="remark_icon" class="title_img"/>
        <div class="title_text" style="margin-left: 0;">备注</div>
      </div>
      <div class="field_input" style="padding-left: 7px;font-size: 14px;">
        <div style="word-break: break-all">{{scheduleObject.remark}}</div>
<!--        <input v-model="scheduleObject.remark" disabled>-->
      </div>
    </div>

    <!--提交-->
    <div class="submit" v-if="external_id">
      <div class="submit_btn" @click="voiceCall">
        立即拜访
      </div>
    </div>

    <!--时间picker-->
    <Popup v-model="dateShow" position="bottom">
      <DatetimePicker type="datetime" v-model="currentDate" :formatter="formatter" @confirm="datetimeConfirm"
                      @cancel="dateShow=false"/>
    </Popup>

    <!--材料picker-->
    <Popup v-model="materialShow" position="bottom">
      <Picker show-toolbar :columns="materialList" @confirm="materialConfirm" @cancel="materialShow=false"/>
    </Popup>
    <ActionSheet :actions="actionSheetList"
                 v-model="phoneActionSheetShow"
                 :round="false"
                 cancel-text="取消"
                 @select="handlePhoneActionSheetSelect">
    </ActionSheet>
  </div>
</template>

<script>
import record_icon from '@assets/image/record_icon.svg'
import people_icon from '@assets/image/people_icon.svg'
import flag_icon from '@assets/image/flag_icon.svg'
import location_icon from '@assets/image/location_icon.svg'
import time_icon from '@assets/image/time_icon.svg'
import copy_icon from '@assets/image/copy_icon.svg'
import remark_icon from '@assets/image/remark_icon.svg'
import env from '@config/env'
import {dateFormat} from '@util/date'

import {getsignature} from '@api/auth'
import {
  scheduleDetailQuery,
  getEtmscode
} from '@api/schedule'

import {
  getDoctorlist,
  getWechatInfo
} from '@api/ihub'
import {
  Button,
  Uploader,
  Cell,
  Popup,
  DatetimePicker,
  Picker,
  ActionSheet
} from 'vant'

export default {
  name: "schedule_detail",
  components: {
    Button,
    Uploader,
    Cell,
    Popup,
    DatetimePicker,
    Picker,
    ActionSheet
  },
  data() {
    return {
      etmscode: '',
      scheduleObject: {},
      record_icon: record_icon,
      people_icon: people_icon,
      flag_icon: flag_icon,
      location_icon: location_icon,
      time_icon: time_icon,
      copy_icon: copy_icon,
      remark_icon: remark_icon,
      dateShow: false,
      currentDate: null,
      currentDateStr: '',
      materialShow: false,
      materialList: [],
      materialStr: '',
      actionSheetList: [
        {name: '视频通话'},
        {name: '视频通话'}
      ],
      phoneActionSheetShow: false,
      external_id: ''

    }
  },
  created() {
  },
  methods: {
    formatter(type, value) {
      if (type === 'year') {
        return `${value}年`
      } else if (type === 'month') {
        return `${value}月`
      } else if (type === 'day') {
        return `${value}日`
      } else if (type === 'hour') {
        return `${value}时`
      } else if (type === 'minute') {
        return `${value}分`
      }
    },
    showDatetimePicker() {
      this.dateShow = true
    },
    datetimeConfirm(value) {
      this.dateShow = false
      this.currentDateStr = dateFormat('YYYY-mm-dd HH:MM', new Date(value))
    },
    showMaterial() {
      this.materialShow = true
    },
    materialConfirm(value, index) {
      this.materialStr = value
      this.materialShow = false
    },
    nav2edit() {
      this.$router.replace(`/schedule/edit/${this.$route.params.id}`)
    },
    showPhoneActionSheet() {
      this.phoneActionSheetShow = true
    },
    handlePhoneActionSheetSelect(action, index) {
      //判断通话类型
      if (index == 0) {
        this.videoCall()
      }
      if (index == 1) {
        this.voiceCall()
      }
      this.phoneActionSheetShow = false
    },
    videoCall() {
      wx.openEnterpriseChat({
        // 注意：userIds和externalUserIds至少选填一个，且userIds+externalUserIds总数不能超过2000。
        externalUserIds: this.external_id, // 参与会话的外部联系人列表，格式为userId1;userId2;…，用分号隔开。
        groupName: '拜访',  // 必填，会话名称。单聊时该参数传入空字符串""即可。
        success: function (res) {
          // 回调
          console.log('创建会话')
        },
        fail: function (res) {
          if (res.errMsg.indexOf('function not exist') > -1) {
            // alert('版本过低请升级')
          }
        }
      });
    },
    voiceCall() {
      wx.openEnterpriseChat({
        // 注意：userIds和externalUserIds至少选填一个，且userIds+externalUserIds总数不能超过2000。
        externalUserIds: this.external_id, // 参与会话的外部联系人列表，格式为userId1;userId2;…，用分号隔开。
        groupName: '拜访',  // 必填，会话名称。单聊时该参数传入空字符串""即可。
        success: function (res) {
          // 回调
          console.log('创建会话')
        },
        fail: function (res) {
          if (res.errMsg.indexOf('function not exist') > -1) {
            // alert('版本过低请升级')
          }
        }
      });
    },
    nav2Send() {
      let url = env.ONE_STEP_SEND +this.etmscode
      window.location.href = url
    },
    getDoctors() {
      getDoctorlist().then(res => {
        if (res.data.rtnCode == 0) {
          this.doctors = res.data.data
          this.contactSelect = this.doctors.map((item, index) => {
            return {value: index, text: item.name}
          })
          for (let i = 0; i < res.data.data.length; i++) {
            let z = res.data.data[i]
            if (z.customerId == this.scheduleObject.contactId) {
              this.external_id = z.external_userid
              break;
            }
          }
        } else {
          // alert(res.data.rtnMsg)
        }
      })
    },
    initWxConfig() {
      getsignature({
        url: window.location.href
      }).then(res => {
        wx.config({
          beta: true,// 必须这么写，否则wx.invoke调用形式的jsapi会有问题
          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: res.data.Array[0].corpid, // 必填，企业微信的corpID
          timestamp: res.data.Array[0].timestamp, // 必填，生成签名的时间戳
          nonceStr: res.data.Array[0].nonceStr, // 必填，生成签名的随机串
          signature: res.data.Array[0].signature,// 必填，签名，见 附录-JS-SDK使用权限签名算法
          jsApiList: ['openEnterpriseChat'] // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来
        });
      })
    }

  },
  mounted() {
    let self = this
    // setTimeout(this.initWxConfig, 1000)
    // alert(this.$route.query.id);
    setTimeout(scheduleDetailQuery(this.$route.params.id).then(res => {
      if (res.successful) {
        this.scheduleObject = res.data
        this.currentDateStr = res.data.time
        this.materialStr = res.data.callMaterialName
        getEtmscode(res.data.contactId,sessionStorage.getItem("origin_email")).then(res => {
          if (res.statusCode) {
            if (res.data) {
              self.etmscode = res.data.hcpEtmsCode
            } else {
              alert('获取etmsccode为空')
            }

          } else {
            alert('获取etmsccode失败：' + res.message)
          }
        })
      } else {
        alert("系统提示:"+res.message)
      }
    }), 1000)
    this.getDoctors()
  }
}
</script>
<style scoped src="./index.css"/>
